<template>
  <div class="body">
    <!-- 面包屑区域 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">内容管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片组件 -->
    <el-card class="box-card">
      <!-- 搜索部分 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入标题查找"
            v-model="query"
            clearable
            @clear="SearchBoard()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="SearchBoard()"
            ></el-button> </el-input
        ></el-col>
      </el-row>
      <!-- 公告内容表格 -->
      <el-table
        :data="Board"
        style="width: 100%"
        stripe
        align="center"
        show-overflow-tooltip
      >
        <el-table-column prop="author" label="发布者" width="100">
        </el-table-column>
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="content" label="内容" width="350">
        </el-table-column>
        <!-- <el-table-column label="图片" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.img != null">
              <el-image
                style="height:50px;"
                :src="scope.row.img"
                fit="fill "
              ></el-image>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="time" label="发布时间" width="180">
        </el-table-column>
        <el-table-column label="公告类型" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 1" type="danger">紧急</el-tag>
            <el-tag v-if="scope.row.type == 0">普通</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 删除公告 -->
            <el-tooltip
              effect="light"
              content="删除公告"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteboard(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改用户的对话框 -->
    <el-dialog
      title="编辑内容"
      :visible.sync="edituservisible"
      width="40%"
      @close="resetform"
      top="10vh"
    >
      <!-- 内容主题区域 -->
      <el-form
        :model="editform"
        :rules="editformrule"
        ref="editFormRef"
        width="500px"
        label-width="100px"
      >
        <el-form-item label="贴文序号">
          <el-input v-model="editform.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="发布者">
          <el-input v-model="editform.author" disabled></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="editform.title" clearable></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="editform.content" clearable></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="time">
          <el-date-picker
            v-model="editform.time"
            type="datetime"
            placeholder="Select date and time"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="点赞数量" prop="zan">
          <el-input v-model="editform.zan" clearable></el-input>
        </el-form-item>
      </el-form>
      <!-- 结束内容主题区 -->
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="editcontentover">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框结束 -->
  </div>
</template>

<script>
export default {
  data() {
    const isNum = (rule, value, callback) => {
      const age = /^[0-9]*$/;
      if (!age.test(value)) {
        callback(new Error("点赞数量只能为数字"));
      } else {
        callback();
      }
    };
    return {
      Board: [
        {
          id: "",
          author: "",
          content: "",
          time: "",
          title: "",
          type: "",
          img: "",
          // comments: "",
        },
      ],
      // 每页显示多少条
      pagesize: "2",
      // 当前页数
      pagenum: "1",
      total: 0,
      query: "",
      // 是否可见对话框
      adduservisible: false,
      addFormrules: {
        id: [
          {
            required: true,
            message: "请输入学号",
            trigger: "blur",
          },
          {
            min: 10,
            max: 12,
            message: "学号长度应为10-12个字符",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "用户名长度应为2-10个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 15,
            message: "密码长度应为6-15个字符",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请输入性别",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
        ],
      },
      // 修改用户区域
      edituservisible: false,
      editform: {
        id: "",
        author: "",
        content: "",
        time: "",
        title: "",
        zan: "",
      },
      editformrule: {
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: "blur",
          },
        ],
        time: [
          {
            required: true,
            message: "请输入时间",
            trigger: "blur",
          },
        ],
        zan: [
          {
            required: true,
            message: "请输入点赞数量",
            trigger: "blur",
          },
          {
            validator: isNum,
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.SearchBoard();
  },
  methods: {
    SearchBoard() {
      if (this.query == "") {
        this.getBoardlist();
      } else {
        this.$http
          .post("http://localhost:8090/Board/query", {
            title: this.query,
          })
          .then((res) => {
            console.log(res);
            this.Board = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    getBoardlist() {
      this.$http
        .get("http://localhost:8090/Board/find")
        .then((res) => {
          console.log(res);
          this.Board = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 重置添加用户验证
    resetform() {
      this.$refs.addFormRef.resetFields();
      this.$refs.editFormRef.resetFields();
    },
    // 修改用户完成 发送请求
    editcontentover() {
      console.log(this.editform.time);

      this.$refs.editFormRef.validate((vaild) => {
        if (!vaild) {
          return this.$message.error("修改信息不符合要求");
        }
        this.$http
          .post("http://localhost:8090/Tiewen/updatetiewen", this.editform)
          .then((res) => {
            // if (res.data !== 200) {
            //   return this.$message.error("修改失败");
            // }
            console.log(res);

            this.$message.success("修改成功");
            this.edituservisible = false;
            this.getTiewenlist();
          });
        this.$refs.editFormRef.resetFields();
      });
    },
    cancel() {
      (this.edituservisible = false), this.$refs.editFormRef.resetFields();
    },
    // 删除用户
    deleteboard(id) {
      this.$confirm("此操作将永久删除该公告, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          this.$http
            .post("http://localhost:8090/Board/delete", { id: id })
            .then((res) => {
              this.getBoardlist();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.box-card {
  height: fit-content;
  max-height: 600px;
  overflow: auto;
}
</style>
